<script setup>
import { ref, onMounted, nextTick, computed } from 'vue'
import { uploadFiles, downloadFile as apiDownloadFile } from '../api/fileService.js'

// 上传状态
const uploadStatus = ref({
  supervision_record: {
    file: null,
    progress: 0,
    status: 'waiting' // waiting, uploading, success, error
  },
  correction_order: {
    file: null,
    progress: 0,
    status: 'waiting'
  }
})

// 处理文件上传
async function handleFileUpload(itemId, files) {
  if (!files || files.length === 0) return
  
  const file = files[0]
  uploadStatus.value[itemId] = {
    file,
    progress: 0,
    status: 'uploading'
  }
  
  try {
    // 调用真实的上传API
    const result = await uploadFiles([file], (progress) => {
      // 更新上传进度
      uploadStatus.value[itemId].progress = progress
    })
    
    // 上传成功
    uploadStatus.value[itemId].status = 'success'
    
    // 更新文件路径 - 在实际应用中，这里应该使用后端返回的文件路径
    const stageItem = stages.value[0].items.find(i => i.id === itemId)
    if (stageItem) {
      // 为了演示，我们仍然使用本地URL，但在实际应用中应该使用后端返回的路径
      stageItem.filePath = URL.createObjectURL(file)
      // 如果后端返回了fileId，可以保存它用于后续操作
      if (result.fileId) {
        stageItem.fileId = result.fileId
      }
    }
    
    console.log('文件上传成功:', result)
    
    // 检查是否可以生成材料
    checkGenerateMaterialsStatus()
  } catch (error) {
    // 上传失败
    uploadStatus.value[itemId].status = 'error'
    console.error('文件上传失败:', error)
    // 检查是否可以生成材料
    checkGenerateMaterialsStatus()
    // 这里可以添加错误提示
  }
}

// 定义案件阶段数据
const stages = ref([
  { id: 1, name: '材料上传', expanded: true, items: [
    { id: 'materials_upload', name: '材料上传', type: 'docx', filePath: '' }
  ]},
  { id: 2, name: '立案审批', expanded: false, items: [
    { id: 'case_approval', name: '立案审批表', type: 'docx', filePath: '' }
  ]},
  { id: 3, name: '收集案件证据', expanded: false, items: [
    { id: 'interrogation_record', name: '询问笔录', type: 'docx', filePath: '' }
  ]},
  { id: 4, name: '处罚材料', expanded: false, items: [
    { id: 'administrative_penalty_approval', name: '呈请行政处罚审批表', type: 'pdf', filePath: '/呈请行政处罚审批表.pdf' },
    { id: 'administrative_penalty_notice', name: '行政处罚前告知笔录', type: 'pdf', filePath: '/行政处罚前告知笔录.pdf' },
    { id: 'administrative_penalty_decision', name: '行政处罚决定书', type: 'pdf', filePath: '/行政处罚决定书.pdf' }
  ]}
])

// 当前选择的阶段和项目
const selectedStage = ref('materials_upload')

// 当前预览的文档
const previewDocument = ref(null)

// HTML内容用于显示转换后的Word文档
const documentHtmlContent = ref('')
const isLoadingHtml = ref(false)

// 检查文件是否存在
const fileExists = (filePath) => {
  if (!filePath) return false
  // 在实际应用中，可以通过API检查文件是否存在
  // 这里简单返回true，假设所有文件都存在
  return true
}

// 获取文件URL
const getFileUrl = (item) => {
  if (!item || !item.filePath) return ''
  return item.filePath
}

// 用于生成材料功能
const canGenerateMaterials = ref(false)
const isGenerating = ref(false)

// 检查是否已生成立案审批表
const hasGeneratedCaseApproval = computed(() => {
  const caseApprovalStage = stages.value.find(stage => stage.id === 2)
  if (!caseApprovalStage) return false

  const caseApprovalItem = caseApprovalStage.items.find(item => item.id === 'case_approval')
  return caseApprovalItem && caseApprovalItem.jsonData && caseApprovalItem.filePath
})

// 检查是否已生成询问笔录
const interrogationGenerated = computed(() => {
  const interrogationStage = stages.value.find(stage => stage.id === 3)
  if (!interrogationStage) return false

  const interrogationItem = interrogationStage.items.find(item => item.id === 'interrogation_record')
  return interrogationItem && interrogationItem.filePath
})

// 检查是否可以生成材料
function checkGenerateMaterialsStatus() {
  const supervisionRecord = uploadStatus.value.supervision_record
  const correctionOrder = uploadStatus.value.correction_order

  console.log('检查生成材料状态:', {
    supervisionRecord: supervisionRecord.status,
    correctionOrder: correctionOrder.status
  })

  // 只有当两个文件都上传成功后，才可以生成材料
  canGenerateMaterials.value =
    supervisionRecord.status === 'success' &&
    correctionOrder.status === 'success'

  console.log('可以生成材料:', canGenerateMaterials.value)
}

import { sendFilesToBackend } from '../api/fileService.js'

// 生成材料
async function generateMaterials() {
  if (!canGenerateMaterials.value) return

  console.log('开始生成材料流程...')
  console.log('当前上传状态:', uploadStatus.value)

  // 显示加载弹窗
  isGenerating.value = true

  try {
    console.log('开始发送文件到后端...')
    const result = await sendFilesToBackend()
    console.log('文件发送成功:', result)

    // 重置上传状态
    uploadStatus.value = {
      supervision_record: {
        file: null,
        progress: 0,
        status: 'waiting'
      },
      correction_order: {
        file: null,
        progress: 0,
        status: 'waiting'
      }
    }

    // 更新生成材料状态
    canGenerateMaterials.value = false

    // 更新立案审批表的文件路径
    console.log('result对象内容:', result)
    console.log('result.filePath:', result.filePath)
    console.log('result.outputPath:', result.outputPath)
    console.log('result.htmlPath:', result.htmlPath)

    if (result && (result.filePath || result.outputPath)) {
      // 找到立案审批表项目并更新其文件路径
      const caseApprovalStage = stages.value.find(stage => stage.id === 2)
      if (caseApprovalStage) {
        const caseApprovalItem = caseApprovalStage.items.find(item => item.id === 'case_approval')
        if (caseApprovalItem) {
          // 优先使用filePath，如果没有则使用outputPath构建下载URL
          const finalFilePath = result.filePath || (result.outputPath ? `http://localhost:35005/api/files/download/generated/${encodeURIComponent(result.outputPath.split(/[\/\\]/).pop())}` : null)

          if (finalFilePath) {
            caseApprovalItem.filePath = finalFilePath
            // 保存JSON数据用于后续笔录生成
            if (result.jsonData) {
              caseApprovalItem.jsonData = result.jsonData
              console.log('保存立案审批表JSON数据长度:', result.jsonData.length)
            }
            // 保存HTML路径信息
            if (result.htmlPath) {
              caseApprovalItem.htmlPath = result.htmlPath
              console.log('设置HTML路径:', result.htmlPath)
            }
            console.log('设置立案审批表文件路径:', finalFilePath)

            // 展开立案审批阶段
            caseApprovalStage.expanded = true
            // 自动选择立案审批表进行预览
            nextTick(() => {
              console.log('自动选择立案审批表进行预览, filePath:', finalFilePath)
              selectStageItem(caseApprovalItem)
            })
          } else {
            console.error('无法获取有效的文件路径')
          }
        }
      }
    } else {
      console.error('后端返回的结果中没有有效的文件路径信息')
    }

    // 显示成功消息在控制台
    console.log('材料生成成功！立案审批表已生成，可以在左侧菜单查看。')
  } catch (error) {
    console.error('生成材料时出错:', error)
    alert(`生成材料失败: ${error.message}`)
  } finally {
    // 隐藏加载弹窗
    isGenerating.value = false
  }
}

import { generateInterrogationRecord } from '../api/fileService.js'

// 生成笔录
async function generateInterrogation() {
  // 检查是否已经生成了立案审批表
  const caseApprovalStage = stages.value.find(stage => stage.id === 2)
  if (!caseApprovalStage) {
    alert('找不到立案审批阶段')
    return
  }

  const caseApprovalItem = caseApprovalStage.items.find(item => item.id === 'case_approval')
  if (!caseApprovalItem || !caseApprovalItem.jsonData) {
    alert('请先生成立案审批表，然后才能生成询问笔录')
    return
  }

  console.log('开始生成笔录流程...')
  console.log('使用的立案审批表JSON数据长度:', caseApprovalItem.jsonData.length)

  // 显示加载弹窗
  isGenerating.value = true

  try {
    console.log('开始调用笔录生成API...')
    const result = await generateInterrogationRecord(caseApprovalItem.jsonData)
    console.log('笔录生成成功:', result)

    // 更新笔录的文件路径
    console.log('笔录result对象内容:', result)
    console.log('result.wordPath:', result.wordPath)
    console.log('result.htmlPath:', result.htmlPath)
    console.log('result.htmlContent:', result.htmlContent ? result.htmlContent.length : 'null')

    if (result && (result.wordPath || result.htmlContent)) {
      // 找到笔录项目并更新其文件路径
      const interrogationStage = stages.value.find(stage => stage.id === 3)
      if (interrogationStage) {
        const interrogationItem = interrogationStage.items.find(item => item.id === 'interrogation_record')
        if (interrogationItem) {
          // 构建下载URL
          let finalFilePath = null
          if (result.wordPath) {
            const fileName = result.wordPath.split(/[\/\\]/).pop()
            finalFilePath = `http://localhost:35005/api/files/download/generated/${encodeURIComponent(fileName)}`
          }

          if (finalFilePath) {
            interrogationItem.filePath = finalFilePath
            // 保存HTML内容用于预览
            if (result.htmlContent) {
              interrogationItem.htmlContent = result.htmlContent
              console.log('设置HTML内容长度:', result.htmlContent.length)
            }
            if (result.htmlPath) {
              interrogationItem.htmlPath = result.htmlPath
              console.log('设置HTML路径:', result.htmlPath)
            }
            console.log('设置笔录文件路径:', finalFilePath)

            // 展开收集案件证据阶段
            interrogationStage.expanded = true
            // 自动选择笔录进行预览
            nextTick(() => {
              console.log('自动选择笔录进行预览, filePath:', finalFilePath)
              selectStageItem(interrogationItem)
            })
          } else {
            console.error('无法获取有效的笔录文件路径')
          }
        }
      }
    } else {
      console.error('后端返回的结果中没有有效的笔录文件信息')
    }

    // 显示成功消息在控制台
    console.log('笔录生成成功！询问笔录已生成，可以在左侧菜单查看。')
  } catch (error) {
    console.error('生成笔录时出错:', error)
    alert(`生成笔录失败: ${error.message}`)
  } finally {
    // 隐藏加载弹窗
    isGenerating.value = false
  }
}

// 对话框消息
const chatMessages = ref([
  { sender: 'system', content: '欢迎回来，管理员' }
])
const chatInput = ref('')
const isChatExpanded = ref(false)
const chatHeight = ref(150)
const isDragging = ref(false)
const startY = ref(0)
const startHeight = ref(0)

// 获取笔录的HTML内容
function getInterrogationHtmlContent() {
  const interrogationStage = stages.value.find(stage => stage.id === 3)
  if (!interrogationStage) return null

  const interrogationItem = interrogationStage.items.find(item => item.id === 'interrogation_record')
  return interrogationItem ? interrogationItem.htmlContent : null
}

// 下载当前询问笔录
function downloadCurrentInterrogation() {
  const interrogationStage = stages.value.find(stage => stage.id === 3)
  if (!interrogationStage) return

  const interrogationItem = interrogationStage.items.find(item => item.id === 'interrogation_record')
  if (interrogationItem && interrogationItem.filePath) {
    downloadFile(interrogationItem.filePath)
  }
}

// 切换阶段展开/收起
function toggleStage(stageId) {
  const stage = stages.value.find(s => s.id === stageId)
  if (stage) {
    stage.expanded = !stage.expanded
  }
}

// 加载Word文档的HTML版本
async function loadDocumentAsHtml(filePath) {
  if (!filePath) return

  isLoadingHtml.value = true
  documentHtmlContent.value = ''

  try {
    // 检查是否有HTML路径可用
    const htmlUrl = getHtmlPreviewUrl(filePath)
    console.log('尝试加载HTML版本:', htmlUrl)

    const response = await fetch(htmlUrl)
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

    const htmlContent = await response.text()
    documentHtmlContent.value = htmlContent
    console.log('HTML内容加载成功')

    // 等待DOM更新后强制应用样式
    nextTick(() => {
      applyWordLikeStyles()
    })

  } catch (error) {
    console.error('加载HTML内容失败:', error)
    documentHtmlContent.value = `
      <div style="text-align: center; padding: 40px; color: #999;">
        <h3>文档加载失败</h3>
        <p>无法加载文档的HTML版本</p>
        <p>错误：${error.message}</p>
      </div>
    `
  } finally {
    isLoadingHtml.value = false
  }
}

// 强制应用Word风格样式
function applyWordLikeStyles() {
  const htmlFrame = document.querySelector('.html-content-frame')
  if (!htmlFrame) {
    console.log('HTML frame not found, retrying...')
    // 如果没找到，延迟重试
    setTimeout(() => applyWordLikeStyles(), 100)
    return
  }

  console.log('开始应用Word风格样式...')

  // 强制设置表格样式
  const tables = htmlFrame.querySelectorAll('table')
  console.log(`找到 ${tables.length} 个表格`)
  tables.forEach((table, index) => {
    table.style.setProperty('border-collapse', 'collapse', 'important')
    table.style.setProperty('border', '2px solid #000000', 'important')
    table.style.setProperty('width', '100%', 'important')
    table.style.setProperty('font-family', '宋体, 微软雅黑, Arial', 'important')
    table.style.setProperty('font-size', '14px', 'important')
    table.style.setProperty('margin', '15px 0', 'important')
    console.log(`表格 ${index + 1} 样式已应用`)
  })

  // 强制设置单元格样式
  const cells = htmlFrame.querySelectorAll('th, td')
  console.log(`找到 ${cells.length} 个单元格`)
  cells.forEach((cell, index) => {
    cell.style.setProperty('border', '1.5px solid #000000', 'important')
    cell.style.setProperty('padding', '8px', 'important')
    cell.style.setProperty('vertical-align', 'middle', 'important')
    cell.style.setProperty('line-height', '1.4', 'important')

    if (cell.tagName === 'TH') {
      cell.style.setProperty('background-color', '#f0f0f0', 'important')
      cell.style.setProperty('font-weight', 'bold', 'important')
      cell.style.setProperty('text-align', 'center', 'important')
    }
  })

  // 强制设置第一列样式
  const firstCells = htmlFrame.querySelectorAll('tr td:first-child, tr th:first-child')
  console.log(`找到 ${firstCells.length} 个第一列单元格`)
  firstCells.forEach(cell => {
    cell.style.setProperty('font-weight', 'bold', 'important')
    cell.style.setProperty('text-align', 'center', 'important')
    cell.style.setProperty('background-color', '#f8f8f8', 'important')
  })

  // 强制设置标题样式
  const allParagraphs = htmlFrame.querySelectorAll('p')
  console.log(`找到 ${allParagraphs.length} 个段落`)
  if (allParagraphs.length >= 1) {
    const title = allParagraphs[0]
    title.style.setProperty('text-align', 'center', 'important')
    title.style.setProperty('font-size', '18px', 'important')
    title.style.setProperty('font-weight', 'bold', 'important')
    title.style.setProperty('margin', '15px 0', 'important')
    console.log('主标题样式已应用:', title.textContent)
  }
  if (allParagraphs.length >= 2) {
    const subtitle = allParagraphs[1]
    subtitle.style.setProperty('text-align', 'center', 'important')
    subtitle.style.setProperty('font-size', '14px', 'important')
    subtitle.style.setProperty('margin', '10px 0 20px 0', 'important')
    console.log('副标题样式已应用:', subtitle.textContent)
  }

  // 强制设置body样式
  const body = htmlFrame.querySelector('body')
  if (body) {
    body.style.setProperty('max-width', '100%', 'important')
    body.style.setProperty('margin', '0', 'important')
    body.style.setProperty('padding', '20px', 'important')
  }

  console.log('Word风格样式已强制应用完成!')

  // 再次延迟检查，确保样式持续应用
  setTimeout(() => {
    recheckAndApplyStyles()
  }, 500)
}

// 重新检查并应用样式（防止被覆盖）
function recheckAndApplyStyles() {
  const htmlFrame = document.querySelector('.html-content-frame')
  if (!htmlFrame) return

  const tables = htmlFrame.querySelectorAll('table')
  tables.forEach(table => {
    if (!table.style.border.includes('#000000')) {
      console.log('检测到表格样式被覆盖，重新应用...')
      applyWordLikeStyles()
      return
    }
  })
}

// 获取HTML预览URL
function getHtmlPreviewUrl(filePath) {
  // 检查后端返回是否包含htmlPath
  const caseApprovalStage = stages.value.find(stage => stage.id === 2)
  if (caseApprovalStage) {
    const caseApprovalItem = caseApprovalStage.items.find(item => item.id === 'case_approval')
    if (caseApprovalItem && caseApprovalItem.htmlPath) {
      // 从htmlPath提取文件名
      const fileName = caseApprovalItem.htmlPath.split(/[\/\\]/).pop()
      return `http://localhost:35005/api/files/html/${encodeURIComponent(fileName)}`
    }
  }

  // 降级方案：从Word路径推导HTML路径
  if (filePath.includes('/generated/')) {
    const fileName = filePath.split('/').pop().replace('.docx', '.html').replace('.doc', '.html')
    return `http://localhost:35005/api/files/html/${encodeURIComponent(fileName)}`
  }

  // 如果无法确定HTML路径，尝试原来的方式
  return filePath + '/html'
}

// 选择阶段项目
function selectStageItem(item) {
  console.log('选择阶段项目:', item)
  selectedStage.value = item.id
  previewDocument.value = item

  // 如果是Word文档，优先检查是否有HTML内容可以直接显示
  if (item.type === 'docx') {
    if (item.htmlContent) {
      // 如果有直接的HTML内容（如笔录），直接显示
      console.log('使用内容中的HTML内容进行预览')
      documentHtmlContent.value = item.htmlContent
      isLoadingHtml.value = false

      // 等待DOM更新后应用样式
      nextTick(() => {
        applyWordLikeStyles()
      })
    } else if (item.filePath) {
      // 否则尝试加载HTML版本
      loadDocumentAsHtml(item.filePath)
    } else {
      // 清空HTML内容
      documentHtmlContent.value = ''
    }
  } else {
    // 清空HTML内容
    documentHtmlContent.value = ''
  }

  // 所有文档类型都使用iframe显示，不需要特殊处理
  console.log('设置预览文档:', {
    name: item.name,
    type: item.type,
    filePath: item.filePath,
    hasHtmlContent: !!item.htmlContent
  })
}

// 选择案件
function selectCase(caseItem) {
  selectedCase.value = caseItem
}

// 发送消息
function sendMessage() {
  if (chatInput.value.trim()) {
    chatMessages.value.push({ sender: 'user', content: chatInput.value })
    chatInput.value = ''
    // 模拟系统回复
    setTimeout(() => {
      chatMessages.value.push({ sender: 'system', content: '收到您的消息，正在处理...' })
    }, 1000)
  }
}

// 下载文件
async function downloadFile(filePath) {
  if (!filePath) return

  console.log('开始下载文件:', filePath)

  // 如果是生成的文档（包含/api/files/download/generated/），直接使用URL下载
  if (filePath.includes('/api/files/download/generated/')) {
    try {
      // 直接使用提供的下载URL
      const link = document.createElement('a')
      link.href = filePath
      link.download = '' // 让浏览器从响应头中获取文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      console.log('文档下载成功:', filePath)
      return
    } catch (error) {
      console.error('下载失败:', error)
      return
    }
  }

  // 如果文档有fileId，使用API下载；否则使用本地下载
  if (previewDocument.value && previewDocument.value.fileId) {
    try {
      // 从路径中提取文件名
      const fileName = filePath.split('/').pop() || '文档.docx'
      await apiDownloadFile(previewDocument.value.fileId, fileName)
    } catch (error) {
      console.error('API下载失败，尝试本地下载:', error)
      // 降级到本地下载
      fallbackLocalDownload(filePath)
    }
  } else {
    // 本地下载
    fallbackLocalDownload(filePath)
  }
}

// 本地下载作为降级方案
function fallbackLocalDownload(filePath) {
  // 创建一个临时的a标签用于下载
  const link = document.createElement('a')
  link.href = filePath
  // 从路径中提取文件名
  const fileName = filePath.split('/').pop()
  link.download = fileName || '立案审批表.docx'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 在新窗口中打开文件
function openInNewTab(filePath) {
  if (filePath) {
    window.open(filePath, '_blank')
  }
}

// 处理iframe加载错误
function handleIframeError(event) {
  console.log('iframe加载失败:', event)
  // 这里可以添加备选方案的逻辑
}

// 预览PDF文件
function previewPdf(item) {
  if (!item || !item.filePath) {
    console.error('文件路径不存在')
    return
  }
  
  // 不再跳转到新窗口，而是在当前页面预览PDF
  previewDocument.value = {
    name: item.name,
    type: 'pdf',
    filePath: item.filePath
  }
}

// 全屏查看PDF
function viewFullScreenPdf(item) {
  if (!item || !item.filePath) {
    console.error('文件路径不存在')
    return
  }
  
  console.log('正在打开全屏PDF预览:', item.filePath)
  
  // 创建全屏预览层
  const overlay = document.createElement('div')
  overlay.className = 'pdf-fullscreen-overlay'
  
  // 创建PDF查看器 - 使用iframe而不是object，以确保更好的兼容性
  const viewer = document.createElement('iframe')
  viewer.src = item.filePath
  viewer.className = 'pdf-fullscreen-viewer'
  viewer.setAttribute('allowfullscreen', 'true')
  
  // 创建关闭按钮
  const closeBtn = document.createElement('button')
  closeBtn.className = 'pdf-fullscreen-close'
  closeBtn.innerHTML = '×'
  closeBtn.onclick = (e) => {
    e.stopPropagation() // 阻止事件冒泡
    document.body.removeChild(overlay)
    document.body.style.overflow = 'auto'
  }
  
  // 组装并添加到页面
  overlay.appendChild(viewer)
  overlay.appendChild(closeBtn)
  document.body.appendChild(overlay)
  document.body.style.overflow = 'hidden'
  
  // 确保iframe加载完成
  viewer.onload = () => {
    console.log('PDF预览已加载')
  }
  
  // 防止点击overlay时关闭
  overlay.onclick = (e) => {
    e.stopPropagation()
  }
}

// 切换聊天框展开/折叠
function toggleChat() {
  isChatExpanded.value = !isChatExpanded.value
}

// 开始拖动
function startDrag(e) {
  if (!isChatExpanded.value) return
  
  isDragging.value = true
  startY.value = e.clientY
  startHeight.value = chatHeight.value
  
  // 添加全局事件监听
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
}

// 拖动中
function onDrag(e) {
  if (!isDragging.value) return
  
  const deltaY = startY.value - e.clientY
  const newHeight = Math.max(50, Math.min(500, startHeight.value + deltaY))
  chatHeight.value = newHeight
}

// 停止拖动
function stopDrag() {
  isDragging.value = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
}

// 生命周期钩子
onMounted(() => {
  // 初始化时聊天框是折叠的
  isChatExpanded.value = false
  
  // 添加全局事件监听器，用于处理全屏PDF查看
  document.addEventListener('keydown', (e) => {
    // 按ESC键关闭全屏PDF
    if (e.key === 'Escape') {
      const overlay = document.querySelector('.pdf-fullscreen-overlay')
      if (overlay) {
        document.body.removeChild(overlay)
        document.body.style.overflow = 'auto'
      }
    }
  })
})
</script>

<template>
  <div class="container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="header-left">
        <span class="header-title">AI智能研判</span>
        <span class="header-title">案件总览</span>
        <span class="header-title active">程序审查</span>
        <span class="header-title">证据审查</span>
        <span class="header-title">案件分析</span>
      </div>
      <div class="header-right">
        <button class="header-btn">关闭通道</button>
        <button class="header-btn">导出</button>
        <button class="header-btn">管理入口</button>
        <span class="header-user">欢迎回来，管理员</span>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧阶段菜单 -->
      <div class="left-panel">
        <div class="stage-menu">
          <div v-for="stage in stages" :key="stage.id" class="stage-item">
            <div class="stage-header" @click="toggleStage(stage.id)">
              <span class="stage-arrow">{{ stage.expanded ? '▼' : '▶' }}</span>
              <span class="stage-name">{{ stage.name }}</span>
            </div>
            <div v-if="stage.expanded" class="stage-submenu">
              <div v-for="item in stage.items" :key="item.id" 
                class="stage-subitem" 
                :class="{ active: selectedStage === item.id }"
                @click="selectStageItem(item)">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧文档区域 -->
      <div class="right-panel">
        
        <!-- 材料上传与生成页面 -->
        <div v-if="selectedStage === 'materials_upload'" class="document-preview">
          <div class="preview-container">
              <div class="preview-header">
                <h3>上传监督检查记录与责令整改通知书</h3>
              </div>
              
              <div class="documents-upload-container">
              <!-- 监督检查记录上传 -->
              <div class="document-upload-item">
                <div class="document-upload-header">
                  <h4>监督检查记录</h4>
                  <span v-if="uploadStatus.supervision_record.status === 'success'" class="upload-status-badge success">✓ 已上传</span>
                  <span v-else-if="uploadStatus.supervision_record.status === 'uploading'" class="upload-status-badge uploading">⟳ 上传中</span>
                  <span v-else-if="uploadStatus.supervision_record.status === 'error'" class="upload-status-badge error">✗ 上传失败</span>
                  <span v-else class="upload-status-badge">○ 待上传</span>
                </div>
                <div class="upload-area" 
                     @dragover.prevent 
                     @drop.prevent="handleFileUpload('supervision_record', $event.dataTransfer.files)">
                  <div class="upload-content">
                    <div class="upload-icon">📤</div>
                    <p>拖放文件到此处上传</p>
                    <p>或</p>
                    <label class="upload-btn">
                      <input type="file" accept=".docx,.doc" @change="handleFileUpload('supervision_record', $event.target.files)" style="display: none;">
                      选择文件
                    </label>
                  </div>
                  <div v-if="uploadStatus.supervision_record.status === 'uploading'" class="upload-progress">
                    <div class="progress-bar" :style="{ width: uploadStatus.supervision_record.progress + '%' }"></div>
                    <span>{{ uploadStatus.supervision_record.progress }}%</span>
                  </div>
                  <div v-else-if="uploadStatus.supervision_record.status === 'success'" class="upload-success">
                    ✓ 上传成功
                    <button 
                      v-if="uploadStatus.supervision_record.file" 
                      @click="downloadFile(URL.createObjectURL(uploadStatus.supervision_record.file))" 
                      class="download-btn small">下载</button>
                  </div>
                  <div v-else-if="uploadStatus.supervision_record.status === 'error'" class="upload-error">
                    ✗ 上传失败，请重试
                  </div>
                </div>
              </div>
              
              <!-- 责令整改通知书上传 -->
              <div class="document-upload-item">
                <div class="document-upload-header">
                  <h4>责令整改通知书</h4>
                  <span v-if="uploadStatus.correction_order.status === 'success'" class="upload-status-badge success">✓ 已上传</span>
                  <span v-else-if="uploadStatus.correction_order.status === 'uploading'" class="upload-status-badge uploading">⟳ 上传中</span>
                  <span v-else-if="uploadStatus.correction_order.status === 'error'" class="upload-status-badge error">✗ 上传失败</span>
                  <span v-else class="upload-status-badge">○ 待上传</span>
                </div>
                <div class="upload-area" 
                     @dragover.prevent 
                     @drop.prevent="handleFileUpload('correction_order', $event.dataTransfer.files)">
                  <div class="upload-content">
                    <div class="upload-icon">📤</div>
                    <p>拖放文件到此处上传</p>
                    <p>或</p>
                    <label class="upload-btn">
                      <input type="file" accept=".docx,.doc" @change="handleFileUpload('correction_order', $event.target.files)" style="display: none;">
                      选择文件
                    </label>
                  </div>
                  <div v-if="uploadStatus.correction_order.status === 'uploading'" class="upload-progress">
                    <div class="progress-bar" :style="{ width: uploadStatus.correction_order.progress + '%' }"></div>
                    <span>{{ uploadStatus.correction_order.progress }}%</span>
                  </div>
                  <div v-else-if="uploadStatus.correction_order.status === 'success'" class="upload-success">
                    ✓ 上传成功
                    <button 
                      v-if="uploadStatus.correction_order.file" 
                      @click="downloadFile(URL.createObjectURL(uploadStatus.correction_order.file))" 
                      class="download-btn small">下载</button>
                  </div>
                  <div v-else-if="uploadStatus.correction_order.status === 'error'" class="upload-error">
                    ✗ 上传失败，请重试
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 生成材料按钮 -->
            <div class="generate-btn-container">
              <button
                class="generate-btn"
                :class="{ disabled: !canGenerateMaterials }"
                :disabled="!canGenerateMaterials"
                @click="generateMaterials"
              >
                生成立案审批表
              </button>
            </div>
            
            <!-- 提示信息 -->
            <div class="upload-tips">
              <p>💡 提示：请先上传监督检查记录和责令整改通知书，两个文件都上传成功后才能点击"生成材料"按钮。</p>
            </div>
          </div>
        </div>
        
        <!-- 询问笔录页面 - 仿照立案审批表样式 -->
        <div v-else-if="selectedStage === 'interrogation_record'" class="document-preview">
          <div class="preview-container">
            <div class="preview-header">
              <h3>询问笔录</h3>
              <div class="preview-actions">
                <span class="document-type">DOCX</span>
                <button v-if="interrogationGenerated"
                        class="download-word-btn"
                        @click="downloadCurrentInterrogation">
                  📥 下载Word文档
                </button>
              </div>
            </div>

            <div class="preview-content">
              <!-- 如果笔录已生成，显示预览 -->
              <div v-if="interrogationGenerated" class="docx-preview">
                <!-- 优先显示HTML内容 -->
                <div v-if="getInterrogationHtmlContent() && !isLoadingHtml" class="docx-frame-container">
                  <div
                    class="html-content-frame"
                    v-html="getInterrogationHtmlContent()">
                  </div>
                </div>
                <!-- HTML加载中 -->
                <div v-else-if="isLoadingHtml" class="html-loading">
                  <div class="loading-spinner"></div>
                  <p>正在加载HTML预览...</p>
                </div>
                <!-- 降级选项 -->
                <div v-else class="docx-fallback">
                  <div class="word-preview-info">
                    <div class="word-icon">📄</div>
                    <h4>询问笔录</h4>
                    <p class="file-name">询问笔录.docx</p>
                    <div class="preview-actions">
                      <button class="preview-btn primary" @click="downloadCurrentInterrogation">
                        <span class="btn-icon">📥</span>
                        下载文档
                      </button>
                    </div>
                    <p class="preview-tip">
                      <small>💡 提示：浏览器可能不支持直接预览Word文档，请下载后使用Office或WPS打开。</small>
                    </p>
                  </div>
                </div>
              </div>

              <!-- 如果笔录未生成，显示生成界面 -->
              <div v-else class="interrogation-generation-wrapper">
                <div class="interrogation-generation-container">
                  <div class="generation-info">
                    <div class="info-header">
                      <h4>📋 询问笔录生成说明</h4>
                    </div>
                    <div class="info-content">
                      <p>询问笔录将基于已生成的立案审批表内容自动生成，包含以下信息：</p>
                      <ul>
                        <li>案件基本信息和当事人详情</li>
                        <li>询问时间、地点和参与人员</li>
                        <li>标准化的询问程序和告知事项</li>
                        <li>案件事实的详细询问记录</li>
                        <li>当事人陈述和答辩内容</li>
                        <li>询问人员和被询问人签字确认</li>
                      </ul>
                    </div>
                  </div>

                  <div class="generation-status">
                    <div v-if="!hasGeneratedCaseApproval" class="status-waiting">
                      <div class="status-icon">⏳</div>
                      <h4>等待立案审批表生成</h4>
                      <p>请先完成立案审批表的生成，然后才能生成询问笔录。</p>
                      <p class="status-tip">💡 提示：请前往"材料上传"页面上传监督检查记录和责令整改通知书，然后生成立案审批表。</p>
                    </div>

                    <div v-else class="status-ready">
                      <div class="status-icon">✅</div>
                      <h4>准备就绪</h4>
                      <p>立案审批表已生成，现在可以生成询问笔录。</p>
                      <button
                        class="generate-interrogation-btn"
                        @click="generateInterrogation"
                        :disabled="isGenerating">
                        <span v-if="isGenerating">🔄 正在生成...</span>
                        <span v-else>📝 生成询问笔录</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他文档预览 -->
        <div v-else-if="previewDocument" class="document-preview">
          <div class="preview-container">
            <div class="preview-header">
              <h3>{{ previewDocument.name }}</h3>
              <div class="preview-actions">
                <span class="document-type">{{ previewDocument.type.toUpperCase() }}</span>
                <button v-if="previewDocument.type === 'docx'"
                        class="download-word-btn"
                        @click="downloadFile(previewDocument.filePath)">
                  📥 下载Word文档
                </button>
              </div>
            </div>
            
            <div class="preview-content">
              <div v-if="previewDocument.type === 'pdf'" class="pdf-preview">
                <div class="pdf-frame-container">
                  <iframe 
                    v-if="previewDocument.filePath" 
                    :src="previewDocument.filePath" 
                    class="pdf-frame"
                    title="PDF预览">
                  </iframe>
                  <div v-else class="pdf-fallback">
                    <p>无法预览此文件</p>
                    <button class="preview-btn" @click="downloadFile(previewDocument.filePath)">下载文件</button>
                  </div>
                </div>
              </div>
              
              <div v-else-if="previewDocument.type === 'docx'" class="docx-preview">
                <!-- 优先显示HTML内容 - 使用与iframe相同的容器结构 -->
                <div v-if="documentHtmlContent && !isLoadingHtml" class="docx-frame-container">
                  <div
                    class="html-content-frame"
                    v-html="documentHtmlContent">
                  </div>
                </div>
                <!-- HTML加载中 -->
                <div v-else-if="isLoadingHtml" class="html-loading">
                  <div class="loading-spinner"></div>
                  <p>正在加载HTML预览...</p>
                </div>
                <!-- HTML加载失败或不可用时，显示iframe或降级选项 -->
                <div v-else class="docx-frame-container">
                  <!-- 先尝试使用iframe显示 -->
                  <iframe
                    v-if="previewDocument.filePath"
                    :src="previewDocument.filePath"
                    class="docx-frame"
                    title="Word文档预览"
                    @error="handleIframeError">
                  </iframe>
                  <!-- 如果iframe无法显示Word，显示操作选项 -->
                  <div v-if="!previewDocument.filePath" class="docx-fallback">
                    <div class="word-preview-info">
                      <div class="word-icon">📄</div>
                      <h4>Word 文档预览</h4>
                      <p class="file-name">{{ previewDocument.name }}</p>
                      <div class="preview-actions">
                        <button class="preview-btn primary" @click="downloadFile(previewDocument.filePath)">
                          <span class="btn-icon">📥</span>
                          下载文档
                        </button>
                        <button class="preview-btn secondary" @click="openInNewTab(previewDocument.filePath)">
                          <span class="btn-icon">🔗</span>
                          在新窗口中打开
                        </button>
                      </div>
                      <p class="preview-tip">
                        <small>💡 提示：浏览器可能不支持直接预览Word文档，请下载后使用Office或WPS打开。</small>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div v-else class="no-document-selected">
                <p>不支持的文件类型</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 默认显示 -->
        <div v-else class="document-preview">
          <div class="preview-container">
            <div class="preview-content">
              <div class="no-document-selected">
                <p>请从左侧菜单选择一个文档</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部对话框 -->
    <div class="chat-container" :class="{ 'chat-expanded': isChatExpanded }" :style="{ height: isChatExpanded ? chatHeight + 'px' : '40px' }">
      <!-- 拖动条 -->
      <div class="chat-resize-handle" v-if="isChatExpanded" @mousedown="startDrag"></div>
      
      <!-- 聊天头部 -->
      <div class="chat-header" @click="toggleChat">
        <div class="chat-title">
          <i class="chat-icon">🤖</i>
          <h4>AI智能问答</h4>
        </div>
        <div class="chat-actions">
          <span class="toggle-icon">{{ isChatExpanded ? '▼' : '▲' }}</span>
          <button v-if="isChatExpanded" class="action-icon" @click.stop>📋</button>
          <button v-if="isChatExpanded" class="action-icon" @click.stop>⚙️</button>
        </div>
      </div>
      
      <!-- 聊天内容区域 -->
      <div v-show="isChatExpanded" class="chat-content">
        <div class="chat-messages">
          <div v-for="(msg, index) in chatMessages" :key="index" 
            class="chat-message" 
            :class="{ 'user-message': msg.sender === 'user', 'system-message': msg.sender === 'system' }">
            <div class="message-avatar">
              {{ msg.sender === 'user' ? '👤' : '🤖' }}
            </div>
            <div class="message-bubble">
              <div class="message-content">{{ msg.content }}</div>
              <div class="message-time">{{ new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) }}</div>
            </div>
          </div>
        </div>
        
        <!-- 输入区域 -->
        <div class="chat-input-area">
          <input 
            type="text" 
            v-model="chatInput" 
            placeholder="输入您的问题或指令..." 
            class="chat-input"
            @keyup.enter="sendMessage">
          <button @click="sendMessage" class="send-btn">
            <span class="send-icon">📤</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 生成材料加载弹窗 -->
    <div v-if="isGenerating" class="loading-overlay">
      <div class="loading-modal">
        <div class="loading-content">
          <div class="loading-spinner"></div>
          <h3>正在生成材料</h3>
          <p>AI正在分析文档内容，请稍候...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 全局强制全屏样式 */
html, body {
  height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh !important;
  width: 100vw !important;
  min-height: 100vh !important;
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #f5f7fa;
  overflow: hidden;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 响应式布局适配 */
@media (max-width: 1200px) {
  .left-panel {
    width: 200px;
  }
}

@media (max-width: 992px) {
  .header-left {
    gap: 15px;
  }
  
  .header-title {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .left-panel {
    width: 180px;
  }
  
  .header {
    padding: 0 10px;
  }
  
  .header-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* 顶部导航 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #e1e8ed;
}

.header-left {
  display: flex;
  gap: 20px;
}

.header-title {
  padding: 5px 10px;
  cursor: pointer;
  color: #666;
}

.header-title.active {
  color: #1890ff;
  font-weight: bold;
  border-bottom: 2px solid #1890ff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-btn {
  padding: 5px 15px;
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
}

.header-user {
  color: #666;
}

/* 主体内容 */
.main-content {
  display: flex;
  flex: 1 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden;
  position: relative;
}

/* 左侧阶段菜单 */
.left-panel {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 100% !important;
  background-color: #fff;
  border-right: 1px solid #e1e8ed;
  overflow-y: auto;
  flex-shrink: 0 !important;
}

.stage-menu {
  padding: 10px 0;
}

.stage-item {
  margin-bottom: 5px;
}

.stage-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
  color: #333;
}

.stage-header:hover {
  background-color: #f5f5f5;
}

.stage-arrow {
  margin-right: 10px;
  font-size: 12px;
}

.stage-submenu {
  background-color: #fafafa;
}

.stage-subitem {
  padding: 8px 40px;
  cursor: pointer;
  color: #666;
}

.stage-subitem:hover {
  background-color: #f0f0f0;
}

.stage-subitem.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border-right: 3px solid #1890ff;
}

/* 右侧文档区域 */
.right-panel {
  flex: 1 !important;
  height: 100% !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* 文档预览区域 */
.document-preview {
  flex: 1 !important;
  height: 100% !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin: 15px;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box !important;
}

.preview-container {
  display: flex;
  flex-direction: column;
  height: 100% !important;
  width: 100% !important;
  flex: 1 !important;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e1e8ed;
  background-color: #fafafa;
  flex-shrink: 0 !important;
}

.preview-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
}

.preview-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.document-type {
  padding: 5px 10px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 4px;
  font-size: 12px;
}

.download-word-btn {
  padding: 8px 16px;
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.download-word-btn:hover {
  background-color: #73d13d;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.preview-content {
  flex: 1 !important;
  height: 100% !important;
  width: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box !important;
}

.pdf-preview, .docx-preview {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 !important;
}

.pdf-frame-container {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 !important;
}

.pdf-frame {
  width: 100% !important;
  height: 100% !important;
  border: 1px solid #e1e8ed;
  border-radius: 4px;
  flex: 1 !important;
}

/* Word文档iframe样式，与PDF一致 */
.docx-frame-container {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 !important;
}

.docx-frame {
  width: 100% !important;
  height: 100% !important;
  border: 1px solid #e1e8ed;
  border-radius: 4px;
  flex: 1 !important;
}

/* HTML内容框架样式 - 确保不影响整体布局 */
.html-content-frame {
  width: 100% !important;
  height: 100% !important;
  border: 1px solid #e1e8ed;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden !important; /* 防止水平滚动影响布局 */
  background-color: #fff;
  box-sizing: border-box !important;
  display: block !important;
  min-height: 500px; /* 确保最小高度 */
}

/* 重置HTML内容中可能影响布局的样式 - 彻底覆盖Pandoc默认样式 */
.html-content-frame * {
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important; /* 强制所有元素左对齐 */
}

/* 激进方法：使用CSS重要性覆盖所有可能的边框样式 */
.html-content-frame table[style] {
  border: 2px solid #000000 !important;
  border-color: #000000 !important;
}

.html-content-frame th[style],
.html-content-frame td[style] {
  border: 1.5px solid #000000 !important;
  border-color: #000000 !important;
}

/* 使用属性选择器强制覆盖内联样式 */
.html-content-frame [style*="border"],
.html-content-frame [style*="Border"] {
  border: 1.5px solid #000000 !important;
  border-color: #000000 !important;
}

.html-content-frame html,
.html-content-frame body {
  margin: 0 !important;
  padding: 20px !important;
  width: 100% !important;
  max-width: 100% !important;  /* 覆盖Pandoc的36em限制 */
  height: auto !important;
  font-size: 14px !important;  /* 固定字体大小，避免em单位影响 */
  text-align: left !important; /* 强制body左对齐 */
}

/* 特别针对Pandoc生成的body样式进行重置 */
.html-content-frame body {
  margin: 0 !important;
  padding: 15px !important;
  max-width: 100% !important;  /* 关键：覆盖36em限制 */
  width: 100% !important;
  padding-left: 15px !important;  /* 覆盖50px */
  padding-right: 15px !important; /* 覆盖50px */
  padding-top: 15px !important;   /* 覆盖50px */
  padding-bottom: 15px !important; /* 覆盖50px */
  text-align: left !important; /* 强制body左对齐 */
}

/* 确保表格宽度适应容器 - Word文档风格 */
.html-content-frame table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  display: table !important; /* 覆盖Pandoc的block显示 */
  overflow-x: visible !important; /* 覆盖Pandoc的auto */
  border-collapse: collapse !important;
  margin: 15px 0 !important;
  font-family: '宋体', '微软雅黑', Arial, sans-serif !important;
  font-size: 14px !important;
  border: 2px solid #000000 !important; /* Word风格的外边框，更粗 */
  outline: 1px solid #000000 !important; /* 额外的轮廓确保显示 */
}

/* 强制所有表格边框显示 - 最高优先级 */
.html-content-frame table,
.html-content-frame table *,
.html-content-frame thead,
.html-content-frame tbody,
.html-content-frame tr,
.html-content-frame th,
.html-content-frame td {
  border-color: #000000 !important;
  border-style: solid !important;
}

/* 确保表格行和单元格正常显示 */
.html-content-frame thead,
.html-content-frame tbody,
.html-content-frame tr {
  display: table-row-group !important;
  width: 100% !important;
}

.html-content-frame tr {
  display: table-row !important;
  width: 100% !important;
}

/* Word风格的表格单元格 - 强制黑色边框 */
.html-content-frame th,
.html-content-frame td {
  display: table-cell !important;
  padding: 6px 8px !important; /* Word文档的典型内边距 */
  border: 1.5px solid #000000 !important; /* 更粗的黑色边框，确保可见 */
  border-color: #000000 !important; /* 强制黑色 */
  vertical-align: middle !important; /* Word表格通常居中对齐 */
  word-wrap: break-word !important;
  text-align: left !important; /* 强制所有表格内容左对齐 */
  line-height: 1.4 !important; /* 适合的行高 */
  font-size: 13px !important;
  box-shadow: inset 0 0 0 1px #000000 !important; /* 内阴影确保边框显示 */
}

/* 特别强化边框样式 */
.html-content-frame table th[style],
.html-content-frame table td[style] {
  border: 1.5px solid #000000 !important;
  border-color: #000000 !important;
}

/* Word风格的表头样式 */
.html-content-frame th {
  text-align: center !important; /* 表头通常居中 */
  font-weight: bold !important;
  background-color: #f8f8f8 !important; /* 浅灰色背景，像Word表头 */
  border: 2px solid #000000 !important; /* 表头边框更粗 */
  border-color: #000000 !important;
  padding: 8px !important;
  box-shadow: inset 0 0 0 1px #000000 !important;
}

/* 特殊样式：第一列通常是标签列，可以有不同样式 */
.html-content-frame td:first-child,
.html-content-frame th:first-child {
  font-weight: bold !important;
  background-color: #fafafa !important; /* 第一列稍微突出 */
  text-align: center !important; /* 标签列居中 */
  border: 2px solid #000000 !important; /* 第一列边框更粗 */
  border-color: #000000 !important;
  box-shadow: inset 0 0 0 1px #000000 !important;
}

/* 跨列单元格的特殊处理 */
.html-content-frame td[colspan],
.html-content-frame th[colspan] {
  text-align: left !important; /* 跨列内容左对齐 */
  padding: 8px 12px !important;
  border: 1.5px solid #000000 !important;
  border-color: #000000 !important;
  box-shadow: inset 0 0 0 1px #000000 !important;
}

/* 跨行单元格的特殊处理 */
.html-content-frame td[rowspan],
.html-content-frame th[rowspan] {
  text-align: center !important; /* 跨行内容居中 */
  vertical-align: middle !important;
  font-weight: bold !important;
  border: 1.5px solid #000000 !important;
  border-color: #000000 !important;
  box-shadow: inset 0 0 0 1px #000000 !important;
}

/* 覆盖所有可能的居中样式 */
.html-content-frame p,
.html-content-frame div,
.html-content-frame span,
.html-content-frame h1,
.html-content-frame h2,
.html-content-frame h3,
.html-content-frame h4,
.html-content-frame h5,
.html-content-frame h6 {
  text-align: left !important; /* 强制所有文本左对齐 */
  font-family: '宋体', '微软雅黑', Arial, sans-serif !important;
  line-height: 1.5 !important;
}

/* Word文档风格的标题样式 */
.html-content-frame > p:first-child {
  text-align: center !important; /* 第一个段落通常是标题，居中显示 */
  font-size: 18px !important;
  font-weight: bold !important;
  margin: 10px 0 15px 0 !important;
}

/* 第二个段落通常是编号，也居中 */
.html-content-frame > p:nth-child(2) {
  text-align: center !important;
  font-size: 14px !important;
  margin: 5px 0 20px 0 !important;
  color: #333 !important;
}

/* 表格内的段落样式 */
.html-content-frame td p,
.html-content-frame th p {
  margin: 2px 0 !important; /* 表格内段落间距更小 */
  line-height: 1.3 !important;
}

/* 覆盖Pandoc的响应式媒体查询 */
@media (max-width: 600px) {
  .html-content-frame body {
    font-size: 14px !important;
    padding: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .html-content-frame th,
  .html-content-frame td {
    text-align: left !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
  }

  .html-content-frame table {
    border: 1px solid #000000 !important; /* 小屏幕下边框稍细 */
  }

  .html-content-frame th,
  .html-content-frame td {
    border: 1px solid #000000 !important;
    box-shadow: inset 0 0 0 1px #000000 !important;
  }
}

/* 终极边框方案：如果所有CSS都失效，使用伪元素创建边框效果 */
.html-content-frame table::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #000000;
  pointer-events: none;
  z-index: 1;
}

/* 为表格添加网格线效果 */
.html-content-frame td::after,
.html-content-frame th::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #000000;
  pointer-events: none;
}

.html-content-frame tr::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #000000;
  pointer-events: none;
}

.docx-fallback {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 4px;
  height: 100%;
  width: 100%;
}

/* Word文档预览信息样式 */
.word-preview-info {
  max-width: 400px;
  margin: 0 auto;
}

.word-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.8;
}

.word-preview-info h4 {
  color: #333;
  margin: 0 0 10px 0;
  font-size: 18px;
}

.file-name {
  color: #666;
  margin: 0 0 25px 0;
  font-size: 14px;
  font-weight: 500;
}

.preview-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 20px;
}

.preview-btn.primary {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.preview-btn.primary:hover {
  background-color: #40a9ff;
  transform: translateY(-1px);
}

.preview-btn.secondary {
  background-color: #fff;
  color: #666;
  border: 1px solid #d9d9d9;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.preview-btn.secondary:hover {
  border-color: #40a9ff;
  color: #40a9ff;
}

.btn-icon {
  font-size: 16px;
}

.preview-tip {
  color: #999;
  margin: 0;
  line-height: 1.4;
}

.pdf-fallback {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 4px;
  height: 100%;
  width: 100%;
}

.preview-btn {
  margin-top: 15px;
  margin-right: 10px;
  padding: 8px 20px;
  background-color: #52c41a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.preview-btn:hover {
  background-color: #73d13d;
}

/* PDF全屏查看样式 */
.pdf-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.pdf-fullscreen-viewer {
  width: 95%;
  height: 95%;
  border: none;
  background-color: white; /* 确保PDF背景是白色的 */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.pdf-fullscreen-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  font-size: 24px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 10000; /* 确保按钮在最上层 */
  transition: all 0.2s ease;
}

.pdf-fullscreen-close:hover {
  background-color: #f0f0f0;
  transform: scale(1.1);
}

/* PDF工具栏 */
.pdf-toolbar {
  display: flex;
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

.toolbar-btn {
  padding: 5px 10px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.toolbar-btn:hover {
  background-color: #40a9ff;
}

.docx-frame {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.docx-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.docx-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.upload-area {
  width: 100%;
  min-height: 200px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: #1890ff;
  background-color: #f0f7ff;
}

.upload-content {
  text-align: center;
  margin-bottom: 20px;
}

.upload-content p {
  color: #333;
  margin-bottom: 8px;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 10px;
  color: #1890ff;
}

.upload-btn {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.upload-btn:hover {
  background-color: #40a9ff;
}

.upload-progress {
  width: 80%;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
}

.progress-bar {
  height: 100%;
  background-color: #52c41a;
  transition: width 0.3s;
}

.upload-success {
  color: #52c41a;
  font-weight: bold;
  margin-top: 10px;
}

.preview-placeholder,
.no-document-selected {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #999;
}

.preview-placeholder p,
.no-document-selected p {
  margin: 5px 0;
}

.download-btn {
  margin: 0;
  padding: 6px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.upload-error {
  color: #ff4d4f;
  font-weight: bold;
  margin-top: 10px;
}

.download-btn:hover {
  background-color: #40a9ff;
}

/* HTML内容显示样式 - 保持与其他预览一致的布局 */
.html-content-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
}

.html-content {
  width: 100%;
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
}

/* HTML内容中的表格样式 */
.html-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.html-content table th,
.html-content table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.html-content table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* HTML内容中的标题样式 */
.html-content h1, .html-content h2, .html-content h3 {
  color: #333;
  margin: 20px 0 10px 0;
  text-align: center;
}

.html-content h1 {
  font-size: 18px;
  font-weight: bold;
}

.html-content h2 {
  font-size: 16px;
  font-weight: bold;
}

.html-content h3 {
  font-size: 14px;
  font-weight: bold;
}

/* HTML内容中的段落样式 */
.html-content p {
  margin: 10px 0;
  text-indent: 0;
}

/* HTML加载状态样式 */
.html-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #666;
}

.html-loading .loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}
.generate-btn-container {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

/* 生成材料按钮 */
.generate-btn {
  padding: 12px 48px;
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s;
  min-width: 200px;
}

.generate-btn:hover:not(.disabled) {
  background-color: #73d13d;
}

.generate-btn.disabled {
  background-color: #d9d9d9;
  cursor: not-allowed;
}

/* 笔录生成按钮 */
.generate-btn.interrogation-btn {
  background-color: #1890ff;
}

.generate-btn.interrogation-btn:hover:not(.disabled) {
  background-color: #40a9ff;
}

/* 文档上传容器 */
.documents-upload-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
  flex: 1 !important; /* 替换max-height限制 */
  height: 100% !important;
  width: 100% !important;
  align-self: stretch !important; /* 替换center对齐 */
  box-sizing: border-box;
  justify-content: center;
  align-content: start;
}

/* 确保文件上传区域在小屏幕上正确显示 */
@media (max-width: 768px) {
  .documents-upload-container {
    grid-template-columns: 1fr;
  }
}

.document-upload-item {
  background-color: #fafafa;
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #e8e8e8;
}

.document-upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.document-upload-header h4 {
  margin: 0;
  color: #333;
  font-size: 16px;
}

/* 上传状态徽章 */
.upload-status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.upload-status-badge.success {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.upload-status-badge.uploading {
  background-color: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.upload-status-badge.error {
  background-color: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.upload-status-badge {
  background-color: #f0f0f0;
  color: #666;
  border: 1px solid #d9d9d9;
}

/* 提示信息 */
.upload-tips {
  padding: 15px 20px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-top: 1px solid #bae7ff;
  font-size: 14px;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

.upload-tips p {
  margin: 0;
}

/* 小尺寸下载按钮 */
.download-btn.small {
  margin-left: 10px;
  padding: 4px 12px;
  font-size: 12px;
  background-color: #1890ff;
}

.download-btn.small:hover {
  background-color: #40a9ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .documents-upload-container {
    grid-template-columns: 1fr;
  }
}

.search-bar {
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #e1e8ed;
}

.search-input {
  width: 100%;
  padding: 8px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.case-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 15px;
}

.case-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.tab {
  padding: 8px 20px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
}

.tab.active {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.case-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.case-item {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.case-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.case-item.active {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.case-number {
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 10px;
}

.case-name {
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.case-time {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.case-description {
  font-size: 12px;
  color: #888;
  margin-top: 10px;
  line-height: 1.5;
}

/* 案件详情 */
.case-detail {
  background-color: #fff;
  border-top: 1px solid #e1e8ed;
  padding: 15px;
  max-height: 400px;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.detail-header h3 {
  margin: 0;
  color: #333;
}

.detail-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 5px 15px;
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.detail-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.form-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
}

.form-item.full-width {
  min-width: 100%;
}

.form-item label {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.form-item span {
  font-size: 14px;
  color: #333;
}

.case-highlight {
  color: #1890ff;
  font-weight: bold;
}

/* 底部对话框 */
.chat-container {
  position: relative;
  background-color: #f9fafc;
  border-top: 1px solid #e1e8ed;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  transition: height 0.3s ease;
  overflow: hidden;
}

.chat-expanded {
  border-top: 1px solid #1890ff;
}

.chat-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
  background-color: transparent;
  z-index: 100;
}

.chat-resize-handle:hover {
  background-color: rgba(24, 144, 255, 0.1);
}

.chat-header {
  padding: 8px 15px;
  border-bottom: 1px solid #eaedf1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}

.chat-header:hover {
  background-color: #f0f7ff;
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-icon {
  font-size: 16px;
  color: #1890ff;
  font-style: normal;
}

.chat-header h4 {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.chat-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.toggle-icon {
  font-size: 12px;
  color: #666;
  transition: transform 0.3s;
}

.chat-expanded .toggle-icon {
  transform: rotate(180deg);
}

.action-icon {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 2px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.action-icon:hover {
  opacity: 1;
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f9fafc;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  padding: 10px 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 85%;
}

.message-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  flex-shrink: 0;
}

.message-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  position: relative;
}

.message-content {
  color: #333;
  line-height: 1.5;
  font-size: 13px;
  word-break: break-word;
}

.message-time {
  font-size: 10px;
  color: #999;
  margin-top: 4px;
  text-align: right;
}

.user-message {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.user-message .message-bubble {
  background-color: #e6f7ff;
  border: 1px solid #bae7ff;
  border-bottom-right-radius: 2px;
}

.system-message .message-bubble {
  background-color: #fff;
  border: 1px solid #eaedf1;
  border-bottom-left-radius: 2px;
}

.chat-input-area {
  display: flex;
  gap: 10px;
  padding: 10px 15px;
  border-top: 1px solid #eaedf1;
  background-color: #fff;
}

.chat-input {
  flex: 1;
  padding: 8px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 18px;
  font-size: 13px;
  transition: border-color 0.3s;
  background-color: #f5f7fa;
}

.chat-input:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
  background-color: #fff;
}

.send-btn {
  width: 36px;
  height: 36px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s;
}

.send-btn:hover {
  background-color: #40a9ff;
}

.send-icon {
  font-size: 14px;
}

/* 加载弹窗样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.loading-modal {
  background-color: #fff;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  max-width: 360px;
  width: 90%;
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.loading-content h3 {
  margin: 20px 0 10px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.loading-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 询问笔录生成页面样式 */
.interrogation-generation-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

.generation-info {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e8e8e8;
}

.info-header h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.info-content p {
  margin: 0 0 10px 0;
  color: #555;
  line-height: 1.6;
}

.info-content ul {
  margin: 10px 0 0 20px;
  color: #555;
}

.info-content li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.generation-status {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e8e8e8;
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.status-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.generation-status h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.generation-status p {
  margin: 0 0 15px 0;
  color: #666;
  line-height: 1.6;
  max-width: 400px;
}

.status-tip {
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 10px 15px;
  border-radius: 6px;
  margin-top: 10px !important;
  border: 1px solid #bae7ff;
}

.generate-interrogation-btn {
  padding: 12px 32px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.generate-interrogation-btn:hover:not(:disabled) {
  background-color: #40a9ff;
  transform: translateY(-1px);
}

.generate-interrogation-btn:disabled {
  background-color: #d9d9d9;
  cursor: not-allowed;
  transform: none;
}

.completed-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  justify-content: center;
}

.action-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.action-btn.preview-btn {
  background-color: #52c41a;
  color: white;
}

.action-btn.preview-btn:hover {
  background-color: #73d13d;
  transform: translateY(-1px);
}

.action-btn.download-btn {
  background-color: #1890ff;
  color: white;
}

.action-btn.download-btn:hover {
  background-color: #40a9ff;
  transform: translateY(-1px);
}
</style>